﻿<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<%@ include file="../organization/function.jsp"%>
<%@ include file="../address/function.jsp"%>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签管理</title>
	<link rel="stylesheet" href="/css/public.css">
	<link  href="../../hos_manage/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="../../css/palace/tag/tag_detail.css">
	<script src="/js/jquery-1.9.1.min.js"></script>
</head>
<body id="app" v-cloak>
<%@ include file="../../header.jsp"%>
<!--内容-->
<div class="containerone">
	<%@ include file="../../left_menu.jsp"%>
	<!--右边内容-->
	<div class="right_cont">
		<!--右边导航下面内容-->
		<div class="tag-detail">
			<div class="title">
				<div class="address-left show-block note">
					<span class="hover" @click="homePage()">首页</span>
					<span class="left-distance">></span>
					<span class="left-distance hover" @click="tagManage()">标签列表</span>
					<span class="left-distance">></span>
					<span class="left-distance">扩展标签</span>
					<span class="left-distance">></span>
					<span class="left-distance" v-html="tag.name + '(' + number + ')'"></span>
				</div>
				<div class="search-input-button">
					<div class="create-member" @click="addMember()">新增成员</div>
					<div class="title-right" @click="showInfoDetail()">标签详情</div>
				</div>
			</div>
			<div class="container">
				<div class="position">
					<div class="show-block address-book-right">
						<div class="data-form show-margin-left line">
							<div class="form-title">
								<img class="point" src="/images/components/add_member/check-box-s.png" v-show="selectedAll" @click="selectAll()">
								<img class="point" src="/images/components/add_member/check-box.png" v-show="!selectedAll" @click="selectAll()">
								<div class="show-block title-width-name">名称</div>
								<div class="show-block title-width-department">部门</div>
							</div>
							<div class="form-title bg-white line" v-for="i in dept">
								<img class="point" src="/images/components/add_member/check-box-s.png" v-show="checkSelectedDept(i)" @click="selectDept(i)">
								<img class="point" src="/images/components/add_member/check-box.png" v-show="!checkSelectedDept(i)" @click="selectDept(i)">
								<div class="show-block title-width-name" v-html="i.deptName"></div>
								<div class="show-block title-width-department" v-html="i.deptName"></div>
							</div>
							<div class="form-title bg-white line" v-for="i in user">
								<img class="point" src="/images/components/add_member/check-box-s.png" v-show="checkSelectedUser(i)" @click="selectUser(i)">
								<img class="point" src="/images/components/add_member/check-box.png" v-show="!checkSelectedUser(i)" @click="selectUser(i)">
								<div class="show-block title-width-name" v-html="i.name"></div>
								<div class="show-block title-width-department" v-html="i.deptList[0].deptName"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="tag-member" v-show="tagMemberShow">
					<div class="detail-title">
						<div class="show-block" v-html="'批量选择(' + selectedAllNum + ')'"></div>
						<img class="show-block detail-img point" style="cursor: pointer" src="../../images/palace/address/xx.png" @click="hideTagMember()">
					</div>
					<div class="all-member">
						<div class="tag-each-member show-block" v-for="i in selectedDept">
							<div class="show-position">
								<img class="each-member" src="/images/palace/address/ic-department.png">
								<img class="close" src="../../images/palace/tag/ic-close1.png" @click="selectDept(i)">
							</div>
							<div class="member-name" v-html="i.deptName"></div>
						</div>
						<div class="tag-each-member show-block" v-for="i in selectedUser">
							<div class="show-position">
								<img class="each-member" :src="i.avatar">
								<img class="close" src="../../images/palace/tag/ic-close1.png" @click="selectUser(i)">
							</div>
							<div class="member-name" v-html="i.name"></div>
						</div>
					</div>
					<div class="member-detail-bottom">
						<div class="remove" @click="tagUserDel()">移出标签</div>
					</div>
				</div>
				<div class="info-detail" v-show="infoDetailShow">
					<div class="detail-title">
						<div class="show-block">详细信息</div>
						<img class="show-block detail-img point" src="../../images/palace/address/xx.png" @click="hideDetailInfo()" style="cursor: pointer">
					</div>
					<div class="detail-avatar">
						<div class="show-block left-img" v-html="tag.name.slice(0, 2)"></div>
						<div class="show-block info-middle">
							<div class="name" v-html="tag.name"></div>
						</div>
					</div>
					<div class="piece">
						<div class="light-black infor show-block">建立时间</div>
						<div class="light-grey infor show-block" v-html="forMateTime(tag.create_time)"></div>
						<div class="one-piece">
							<div class="light-black infor show-block">成员数量</div>
							<div class="light-grey infor show-block" v-html="number"></div>
						</div>
						<div class="one-piece">
							<div class="light-black infor show-block">ID</div>
							<div class="light-grey infor show-block" v-html="tag.id"></div>
						</div>
						<div class="one-piece">
							<div class="light-black infor show-block">备注</div>
							<div class="light-grey infor show-block" v-html="tag.alias"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<addmember v-if="addmemberShow"></addmember>
<danger v-if="dangerTipShow" :title="dangerTitle"></danger>
<message v-if="messageTipShow" :title="messageTitle"></message>
<delete v-if="deleteShow" :top="delete.top" :title="delete.title" :content="delete.content" :arg="delete.arg"></delete>
</body>
<%@ include file="/components/tag/add_member.jsp"%>
<%@ include file="/components/danger.jsp"%>
<%@ include file="/components/message.jsp"%>
<%@ include file="/components/delete.jsp"%>
<script>
    var HOSPITAL = "${user.hospital}";
    new Vue({
        el: "#app",
        data: {
            addmemberShow: false,
            tag: {},
            dept: [],
            user: [],
            dangerTitle: "",
            dangerTipShow: false,
            messageTitle: "",
            messageTipShow: false,
            infoDetailShow: false,
            selectedDept: [],
            selectedUser: [],
            deleteShow: false,
            delete: {
                top: "",
                title: "",
                content: "",
                arg: {},
            }
        },
        computed: {
            // 成员总数
            number: function() {
                return this.dept.length + this.user.length;
            },
            // 选中的总数
            selectedAllNum: function() {
                return this.selectedDept.length + this.selectedUser.length;
            },
            // 至少选中了一个
            tagMemberShow: function() {
                this.infoDetailShow = false;
                return this.selectedAllNum > 0;
            },
            // 如果选中了所有
            selectedAll: function() {
                return this.selectedAllNum == this.number && this.selectedAllNum != 0;
            }
        },
        methods: {
            forMateTime: function(time) {
                var date = new Date(time);
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                return year + "-" + month + "-" + day;
            },
            hideTagMember: function () {
                this.selectedDept = [];
                this.selectedUser = [];
            },
            // 选中或取消所有
            selectAll: function() {
                if (this.selectedAll) {
                    this.selectedDept = [];
                    this.selectedUser = [];
                } else {
                    this.selectedDept = this.dept.slice(0);
                    this.selectedUser = this.user.slice(0);
                }
            },
            tagManage: function () {
                locationHerf("tag_manage");
            },
            homePage: function () {
                location.href = "../../index.jsp";
            },
            // 移除标签信息
            tagUserDel: function() {
                var _this = this;
                this.deleteShow = true;
                this.delete.top = "标签管理";
                this.delete.title = "确定将所选成员移除标签？";
                this.delete.content = "删除后无法恢复";
                this.delete.arg = function() {
                    $.ajax({
                        type: 'POST',
                        url: location.href,
                        data: {
                            act: "tagUserDel",
                            hospital: HOSPITAL,
                            tag_id: _this.tag.id + "",
                            user: _this.selectedUser.map(function(item) {return item.id}).join(","),
                            dept: _this.selectedDept.map(function(item) {return item.id}).join(",")
                        },
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                _this.messageTipShow = true;
                                _this.messageTitle = "删除成功";
                                _this.selectedUser = [];
                                _this.selectedDept = [];
                                _this.getData();
                            } else {
                                _this.dangerTipShow = true;
                                _this.dangerTitle = res.errmsg;
                            }
                        },
                    });
                }

            },
            // 选中
            selectDept: function(i) {
                event.stopPropagation();
                if (this.checkSelectedDept(i)) {
                    this.selectedDept.splice(this.selectedDept.indexOf(i), 1);
                } else {
                    this.selectedDept.push(i);
                }
            },
            // 判断这个人是否被选中
            checkSelectedDept: function(i) {
                return this.selectedDept.filter(function(item) {
                        return item.id == i.id;
                    }).length > 0;
            },
            // 选中
            selectUser: function(i) {
                event.stopPropagation();
                if (this.checkSelectedUser(i)) {
                    this.selectedUser.splice(this.selectedUser.indexOf(i), 1);
                } else {
                    this.selectedUser.push(i);
                }
            },
            // 判断这个人是否被选中
            checkSelectedUser: function(i) {
                return this.selectedUser.filter(function(item) {
                        return item.id == i.id;
                    }).length > 0;
            },
            // 展现标签的详细信息
            showInfoDetail: function() {
                this.infoDetailShow = true;
            },
            // 关闭标签详情
            hideDetailInfo: function() {
                this.infoDetailShow = false;
            },
            // 添加成员
            addMember: function() {
                this.addmemberShow = true;
            },
            // 获取成员信息
            getData: function() {
                var _this = this;
                $.ajax({
                    type: 'POST',
                    url: "tag_manage.jsp",
                    data: {
                        act: "tagList",
                        hospital: HOSPITAL,
                        tag_id: this.tag.id + "",
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            _this.user = res.data.user;
                            _this.dept = res.data.dept;
                        } else {
                            _this.dangerTipShow = true;
                            _this.dangerTitle = res.errmsg;
                        }
                    },
                });
            }
        },
        events: {
            dangerTipOver: function() {
                this.dangerTipShow = false;
            },
            messageTipOver: function() {
                this.messageTipShow = false;
            },
            deleteCancel: function() {
                this.deleteShow = false;
            },
            // 关闭添加成员
            closeAddMember: function() {
                this.addmemberShow = false;
            },
            // 获取选中的成员
            addMember: function(choosed) {
                if (choosed.person.length == 0 && choosed.dept.length == 0) {
                    this.dangerTitle = "请至少选择一个内容";
                    this.dangerTipShow = true;
                    return;
                }
                var _this = this;
                $.ajax({
                    type: 'POST',
                    url: "tag_manage.jsp",
                    data: {
                        act: "tagUserAdd",
                        hospital: HOSPITAL,
                        user: choosed.person.length > 0 ? choosed.person.map(function(item) {return item.id;}).join(",") : undefined,
                        dept: choosed.dept.length > 0 ? choosed.dept.map(function(item) {return item.id}).join(",") : undefined,
                        tag_id: this.tag.id + "",
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            _this.getData();
                            _this.addmemberShow = false;
                            _this.messageTitle = "添加成功";
                            _this.messageTipShow = true;
                        } else {
                            _this.dangerTitle = res.errmsg;
                            _this.dangerTipShow = true;
                        }
                    },
                });
            }
        },
        ready: function() {
            var tag = getHrefParms("tag_detail");
            if (!tag.alias || tag.alias == "") {
                tag.alias = "无";
            }
            this.tag = tag;
            this.getData();
        },
        components: {
            addmember: addMember,
            danger: dangerTip,
            message: messageTip,
            delete: deleteTip,
        }
    });
</script>
</html>